<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员登录 - 文档管理系统</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1677ff', // 主色调，与会员中心保持一致
                        lightBg: '#f5f7fa', // 浅背景色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .login-input {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200;
            }
            .login-button {
                @apply w-full py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
            }
            .label-with-icon {
                @apply flex items-center text-sm font-medium text-gray-700 mb-1;
            }
            .label-icon {
                @apply mr-2 text-gray-500;
            }
        }
    </style>
</head>

<body class="bg-lightBg min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-8">
            <!-- 登录表单头部 -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">会员登录</h1>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" onsubmit="handleLogin(event)">
                <!-- 用户名输入框 -->
                <div class="mb-4">
                    <label for="username" class="label-with-icon">
                        <i class="fa fa-user label-icon"></i>
                        <span>用户名</span>
                    </label>
                    <input type="text" id="username" name="username" class="login-input" placeholder="请输入用户名" required>
                </div>

                <!-- 密码输入框 -->
                <div class="mb-6">
                    <label for="password" class="label-with-icon">
                        <i class="fa fa-lock label-icon"></i>
                        <span>密码</span>
                    </label>
                    <div class="relative">
                        <input type="password" id="password" name="password" class="login-input" placeholder="请输入密码"
                            required>
                        <button type="button" id="togglePassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <!-- 环境选择 -->
                <div class="mb-6">
                    <label class="label-with-icon">
                        <i class="fa fa-server label-icon"></i>
                        <span>登录环境</span>
                    </label>
                    <div class="flex space-x-6">
                        <div class="flex items-center">
                            <input type="radio" id="testEnv" name="environment" value="test" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked>
                            <label for="testEnv" class="ml-2 block text-sm text-gray-700">测试环境</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" id="prodEnv" name="environment" value="prod" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="prodEnv" class="ml-2 block text-sm text-gray-700">正式环境</label>
                        </div>
                    </div>
                </div>
                
                <!-- 记住我和忘记密码 -->
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <input type="checkbox" id="rememberMe" name="rememberMe"
                            class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="rememberMe" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码？</a>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" id="loginBtn" class="login-button">
                    登录
                </button>

                <!-- 错误提示信息 -->
                <div id="errorMessage" class="mt-4 p-3 bg-red-50 text-red-500 rounded-md text-sm hidden">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <span id="errorText">用户名或密码错误</span>
                </div>
            </form>
        </div>

        <!-- 底部注册提示 -->
        <div class="bg-gray-50 px-8 py-4 text-center text-sm text-gray-600">
            还没有账号？ <a href="register.html" class="text-primary hover:text-primary/80 font-medium">立即注册</a>
        </div>
    </div>

        <script>
        // 切换密码可见性
        document.getElementById('togglePassword').addEventListener('click', function () {
            const passwordInput = document.getElementById('password');
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });

        // 切换环境函数
        function switchEnvironment(environment) {
            return new Promise((resolve, reject) => {
                fetch('/api/environment-config?action=switchEnvironment&environment=' + environment, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(result => {
                    if (result.error) {
                        reject(new Error(result.error));
                    } else {
                        resolve();
                    }
                })
                .catch(error => {
                    reject(error);
                });
            });
        }
        
        // 执行登录操作
        function performLogin(username, password, rememberMe, errorMessage, loginBtn) {
            // 显示加载状态
            loginBtn.disabled = true;
            loginBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';
            errorMessage.classList.add('hidden');
            
            // 创建URL参数
            const params = new URLSearchParams();
            params.append('username', username);
            params.append('password', password);
            params.append('rememberMe', rememberMe ? 'on' : 'off');
            params.append('environment', document.querySelector('input[name="environment"]:checked').value);
            
            // 发送登录请求
            fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                credentials: 'same-origin', // 确保包含cookies
                body: params
            })
            .then(response => response.json())
            .then(data => {
                loginBtn.disabled = false;
                loginBtn.innerHTML = '<i class="fa fa-sign-in mr-2"></i> 登录';

                if (data.code === 0) {
                    // 登录成功，在localStorage中存储登录状态
                    localStorage.setItem('isLoggedIn', 'true');
                    localStorage.setItem('username', username);
                    // 跳转到会员中心
                    window.location.href = '/index.html';
                } else {
                    // 登录失败，显示错误信息
                    document.getElementById('errorText').textContent = data.message || '登录失败，请重试';
                    errorMessage.classList.remove('hidden');
                }
            })
            .catch(error => {
                loginBtn.disabled = false;
                loginBtn.innerHTML = '<i class="fa fa-sign-in mr-2"></i> 登录';
                document.getElementById('errorText').textContent = '网络错误，请稍后重试';
                errorMessage.classList.remove('hidden');
            });
        }

        // 处理登录逻辑
        function handleLogin(event) {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const rememberMe = document.getElementById('rememberMe').checked;
            const environment = document.querySelector('input[name="environment"]:checked').value;
            const errorMessage = document.getElementById('errorMessage');
            const loginBtn = document.getElementById('loginBtn');
            
            // 先切换环境
            switchEnvironment(environment).then(() => {
                // 环境切换成功后执行登录操作
                performLogin(username, password, rememberMe, errorMessage, loginBtn);
            }).catch(error => {
                // 环境切换失败，显示错误信息
                loginBtn.disabled = false;
                loginBtn.innerHTML = '<i class="fa fa-sign-in mr-2"></i> 登录';
                document.getElementById('errorText').textContent = '环境切换失败，请重试';
                errorMessage.classList.remove('hidden');
                console.error('环境切换失败:', error);
            });
        }

        // 回车键登录
        document.getElementById('password').addEventListener('keyup', function (event) {
            if (event.key === 'Enter') {
                handleLogin(event);
            }
        });
        </script>
</body>

</html>